import React from "react";
import videojs from "video.js";
import videozhCN from "video.js/dist/lang/zh-CN.json"; //播放器中文，不能使用.js文件
import "video.js/dist/video-js.css"; //样式文件注意要加上
import "videojs-flash"; //如果要播放RTMP要使用flash 需要先npm i videojs-flash
import { Button, DatePicker, Icon } from 'antd'
import { inject, observer } from 'mobx-react';
import $ from 'jquery'
@inject('YunYingStore')
@observer
export default class RtmpVideoPlay extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  componentDidMount() {
    //2 子组件 componentDidMount 中接收 onRef 并把 this 传给父组件
    // this.props.onRef(this);
    console.log("子组件 componentDidMount 中接收 onRef 并把 this 传给父组件");
    // instantiate Video.js
    //这里的this.props是上级传进来的video的options
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      // console.log("onPlayerReady", this);
    });
    videojs.addLanguage("zh-CN", videozhCN);
    // this.player.liveTracker.on('liveedgechange', () => {
    // console.log('跟随直播');
    // this.player.liveTracker.seekToLiveEdge();
    // });
  }
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }
  // 关闭RTMP视频() {
  //   if (this.player) {
  //     this.player.dispose();
  //   }
  // }
  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
    return (
      <React.Fragment>
        <div className="videoFather">
          <div className="videoIcon1">
          </div>
          <Icon type={this.props.type === 'first' ? "fullscreen" : 'fullscreen-exit'} className="videoIcon" onClick={async () => {
            this.props.type === 'first' ?
              this.props.YunYingStore.changeVisible(false) : this.props.YunYingStore.changeVisible(true)
          }} />
          <div data-vjs-player >
            <video
              ref={node => (this.videoNode = node)}
              style={{ background: "transparent" }}
              className={this.props.type === 'first' ? 'video-js0' : 'video-js1'}
            >      </video>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
